<template>
  <view class="user">
    <view class="user-bg">
      <image src="@/static/user.png" />
    </view>
    <view class="user-info dl-flex dl-flex-ai-center dl-flex-jc-start">
      <u-avatar :src="userinfo.avatar"></u-avatar>
      <view class="name">
        <text>{{ userinfo.name || '--' }}</text>
        <text style="display: block; padding-top: 22rpx">{{ userInfo.phone || '--' }}</text>
      </view>
    </view>
    <view class="logout-btn" @click="handleLogOutPrefix">
      <text>退出登录</text>
    </view>
    <u-notify ref="uNotify" :customStyle="{ padding: '13px 10px' }"></u-notify>
    <u-popup :show="popVisiable" bgColor="transparent" :duration="100">
      <view style="background: #f3f3f3; border-radius: 20px 20px 0 0; overflow: hidden; position: absolute; left: 0; bottom: 0; width: 100%">
        <u-button
          type="primary"
          :plain="true"
          text="退出登录"
          :hairline="false"
          :customStyle="{ border: 'none', borderBottom: '1px solid #E5E5E5', marginBottom: '10px' }"
          loadingMode="circle"
          :loading="logoutLoading"
          @click="handleLogOut"
        ></u-button>

        <u-button type="info" :plain="true" text="取消" :hairline="false" :customStyle="{ border: 'none', height: '100px' }" @click="handleShow"></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      popVisiable: false,
      logoutLoading: false
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },
  methods: {
    handleLogOut() {
      this.logoutLoading = true
      this.$store
        .dispatch('permission/logout')
        .then(() => {
          this.$refs.uNotify.show({
            type: 'success',
            message: '操作成功'
          })
          this.popVisiable = false
          uni.showTabBar()
          setTimeout(() => {
            uni.reLaunch({ url: '/pages/login/index' })
          }, 300)
        })
        .finally(() => {
          this.logoutLoading = false
        })
    },
    handleShow() {
      uni.showTabBar()
      this.popVisiable = false
    },
    handleLogOutPrefix() {
      this.popVisiable = true
      uni.hideTabBar()
    }
  }
}
</script>

<style lang="scss">
.user {
  &-bg {
    width: 100%;
    position: relative;
    image {
      width: 100%;
      height: 352rpx;
    }
  }
  &-info {
    position: absolute;
    left: 55rpx;
    top: 80rpx;
    .u-avatar {
      width: 124rpx !important;
      height: 124rpx !important;
      .u-avatar__image {
        width: 100% !important;
        height: 100% !important;
      }
    }
    .name {
      padding-left: 30rpx;
      > text {
        font-weight: 400;
        font-size: 34rpx;
        color: #ffffff;
        line-height: 36rpx;
      }
    }
  }
  .logout-btn {
    width: calc(100% - 60rpx);
    height: 88rpx;
    line-height: 88rpx;
    background: #ffffff;
    position: fixed;
    bottom: 100rpx;
    left: 30rpx;
    text-align: center;
    font-weight: 400;
    font-size: 32rpx;
    color: #375df6;
    border-radius: 10rpx;
    :active {
      background: #f5f5f5;
    }
  }
}
</style>
